<template>
  <div class="MicHaireleReportbox">
    <div class="leftbox">
      <HaveCheckTree
        @handleNodeClicks="handleNodeClicks"
        @deletelist="deletelist"
      ></HaveCheckTree>
    </div>
    <div class="rightbox">
      <div class="righttop">
        <div>
          <span>
            <el-radio-group v-model="radio3" size="small">
              <el-radio-button label="1">日</el-radio-button>
              <el-radio-button label="2">月</el-radio-button>
              <el-radio-button label="3">年</el-radio-button>
              <el-radio-button label="4">总</el-radio-button>
            </el-radio-group>
          </span>
          <span>
            <el-date-picker
              v-if="radio3 == '1'"
              v-model="value1"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择日期"
              size="small"
            ></el-date-picker>
            <el-date-picker
              v-else-if="radio3 == '2'"
              v-model="value2"
              value-format="yyyy-MM"
              type="month"
              placeholder="选择月"
              size="small"
            ></el-date-picker>
            <el-date-picker
              v-else-if="radio3 == '3'"
              v-model="value3"
              value-format="yyyy"
              type="year"
              placeholder="选择年"
              size="small"
            ></el-date-picker>
            <el-date-picker
              v-else
              v-model="value4"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
              size="small"
            ></el-date-picker>
          </span>
        </div>
        <div>
          <el-button @click="chongzhi" size="small">重置</el-button>
          <el-button type="primary" @click="gettablelist" size="small"
            >查询</el-button
          >
        </div>
      </div>
      <div class="rightbody">
        <div class="title">
          <div>发电报表</div>
          <div>
            <TopTile
              @command="command"
              @daochu="daochu"
              @shuaxin="shuaxin"
            ></TopTile>
          </div>
        </div>
        <div class="tablebox">
          <TableColumn
            ref="tabledata"
            :tableData="tableData"
            :tableConfig="tableConfigs"
            :issize="issize"
          >
          </TableColumn>
        </div>
        <!-- <div class="footerfenyr">
          <el-pagination
                background
                layout="prev, pager, next"
                :current-page.sync="pageobj.pageNo"
                :page-size="15"
                @current-change="gettablelist"
                :total="+totalCount">
          </el-pagination>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import { getxitongreportapi } from "@/api/Microgrid/Statistics/MicHaireleReport";
import TopTile from "@/components/TopTitle/index.vue";
import TableColumn from "@/components/Table/index.vue";
import { exportexcel } from "@/utils/excel";
import HaveCheckTree from "../component/HaveCheckTree.vue";
export default {
  name: "CallPoliceIndex",
  components: {
    TopTile,
    TableColumn,
    HaveCheckTree,
  },
  data() {
    return {
      radio3: "1",
      value1: "",
      value2: "",
      value3: "",
      value4: "",
      issize: "medium",
      totalCount: "",
      tableData: [],
      tableConfigs: [
        { label: "序号", type: "index", center: "center", width: "70" },
        { label: "电站名称", prop: "className" },
        { label: "时间", prop: "time", center: "center" },
        { label: "装机容量(kWp)", prop: "installCapacity", center: "right" },
        { label: "发电量(kWh)", prop: "powerGeneration", center: "right" },
        {
          label: "等效利用小时率(h)",
          prop: "equivalentHours",
          center: "right",
        },
      ],
      treelist: [],
    };
  },

  mounted() {
    this.gettime();
  },

  methods: {
    // 树节点点击
    handleNodeClicks(val) {
      this.treelist = val;
      this.gettablelist();
    },
    // 树取消全选
    deletelist() {
      this.tableData = [];
    },
    // 重置
    chongzhi() {
      this.radio3 = "1";
      this.gettime();
      this.gettablelist();
    },
    // 获取表格数据
    async gettablelist() {
      this.$refs.tabledata.loading = true;
      const contrastString = [];
      this.treelist.map((ele) => contrastString.push(ele.id));
      const {
        data: { list },
      } = await getxitongreportapi({
        contrastString: contrastString.join(","),
        dateType: this.radio3,
        dateString:
          this.radio3 == "1"
            ? this.value1
            : this.radio3 == "2"
            ? this.value2
            : this.radio3 == "3"
            ? this.value3
            : this.value4,
      });
      this.tableData = list;
      this.$refs.tabledata.loading = false;
    },
    // 调节表格密度
    command(val) {
      if (val === "默认") {
        this.issize = "medium";
      } else if (val === "中等") {
        this.issize = "small";
      } else {
        this.issize = "mini";
      }
    },
    // 导出
    daochu() {
      const contrastString = [];
      this.treelist.map((ele) => contrastString.push(ele.id));
      exportexcel(
        "mgd-microservice-biz/mgd/photovoltaic/systems/report/data/exportExcel",
        {
          contrastString: contrastString.join(","),
          dateType: this.radio3,
          dateString:
            this.radio3 == "1"
              ? this.value1
              : this.radio3 == "2"
              ? this.value2
              : this.radio3 == "3"
              ? this.value3
              : this.value4,
        },
        "发电报表"
      );
    },
    // 刷新列表
    shuaxin() {
      this.gettablelist();
      this.$message.success("列表刷新成功");
    },
    // 获取当前时间戳
    gettime() {
      const date = new Date();
      const year = date.getFullYear(); // 年
      const mon = date.getMonth() + 1; // 月
      const month = mon < 10 ? "0" + mon : mon;
      const day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate(); //日
      this.$set(this, "value1", year + "-" + month + "-" + day);
      this.$set(this, "value2", year + "-" + month);
      this.$set(this, "value3", year.toString());
      this.value4 = "";
    },
  },
};
</script>

<style scoped>
.MicHaireleReportbox {
  height: 100%;
  padding: 10px;
  display: flex;
  .leftbox {
    width: 300px;
    padding: 20px;
    background-color: #fff;
    margin-right: 10px;
    height: 100%;
  }
  .rightbox {
    width: calc(100% - 310px);
    height: 100%;
    .righttop {
      height: 80px;
      line-height: 80px;
      padding: 0 20px;
      background-color: #fff;
      margin-bottom: 10px;
      display: flex;
      justify-content: space-between;
      .button {
        width: 60px;
        height: 30px;
        border: 1px solid #ccc;
        border-radius: 3px;
        margin-left: 10px;
      }
      .sure {
        color: #fff;
        background-color: #1890ff;
      }
      span {
        margin-right: 15px;
      }
    }
    .rightbody {
      height: calc(100% - 90px);
      background-color: #fff;
      padding: 20px;
      .title {
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;
      }
      .tablebox {
        height: 95%;
        /* margin-bottom: 10px; */
      }
      .footerfenyr {
        text-align: right;
      }
    }
  }
}
</style>
